<template>
	<view>
		<!-- 轮播图 开始 -->
		<!-- 1. 自动轮播  autoplay
		2. 指示器 indicator-dots 
		3. 衔接轮播 circular 
		4. 默认高度150px 
		5. image
			默认的宽度 320px => 基本样式中 重置了100%
			默认的高度 240px
		6. 计算图片的宽度和高度的比例
		7. 把图片的比例反写到swiper标签样式
		-->
		<view class="thumb_swiper">
			<swiper autoplay indicator-dots circular>
				<swiper-item v-for="item in banner" :key="item.id" @click="toNewDetail('4')">
					<image v-if="item.img" :src="getImageUrl(item.img)"></image>
				</swiper-item>
			</swiper>

		</view>
		<!-- 轮播图 结束 -->

		<!-- 中间三个圆item -->
		<view class="recommends_wrap">
			<view class="recommends_item" v-for="(item,index) in headerlist" :key="item.id">
				<image-conponent class="image-conponent" :desc="item.title" :url="headerPath[index].path">
					<image class="recommends_image" :src="getImageUrl(item.img)"></image>
				</image-conponent>
			</view>
		</view>

		<!-- 快报 开始-->
		<view class="newsflash">
			<uni-segmented-control class="segmented" :current="current" :values="items.map(v=>v.title)"
				@clickItem="onClickItem" styleType="text" activeColor="#e68a00">
			</uni-segmented-control>
			<!-- 分割线 -->
			<view class="newsflash_right">
				<view class="newsflash_splitline"></view>
				<view class="newsflash_more" @click="toList()">更多></view>
			</view>
		</view>
		<view class="segmented_content">
			<view class="message" v-show="current === 0">
				<service-list v-if="tokenVal"></service-list>
			</view>
			<view v-show="current === 1">
				<new-list v-if="tokenVal"></new-list>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uniBadge
	} from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue'
	import {
		uniNoticeBar
	} from '@dcloudio/uni-ui/lib/uni-notice-bar/uni-notice-bar.vue'
	import {
		serviceList
	} from '../../components/service-list/service-list.vue'
	import {
		newList
	} from '../../components/new-list/new-list.vue'

	import imageConponent from '@/components/imageConponent'
	import {
		getNewsList,
		getHeaderList
	} from '@/api/home'

	export default {
		components: {
			uniBadge,
			uniNoticeBar,
			imageConponent,
			serviceList,
			newList //新闻组件
		},
		data() {
			return {
				current: 0,
				items: [{
						title: "活动精选"
					},
					{
						title: "活动风采"
					}
				],
				banner: [{
						"id": 1,
						"thumb": "https://img1.baidu.com/it/u=3212319932,4016287815&fm=26&fmt=auto",
					},
					{
						"id": 2,
						"thumb": "https://img1.baidu.com/it/u=4153689278,2989382547&fm=26&fmt=auto",
					}, {
						"id": 3,
						"thumb": "https://img2.baidu.com/it/u=2873754567,4072673539&fm=26&fmt=auto",
					}
				],
				headerlist: [],
				headerPath: [{
						path: '/pages/index/demand/index'
					},
					{
						path: '/pages/index/services/index'
					},
					{
						path: '/pages/index/my_service/my_service'
					}
				],
				newsflash: [],
				longitude: 113.131487,
				latitude: 22.974276,
				scale: 11,
				markers: [{
					latitude: 22.974946,
					longitude: 113.132744,
					iconPath: '../../static/logo.png',
					width: 25,
					height: 25
				}],
				tokenParams: {
					encryptedData: '',
					signature: '',
					rawData: '',
					iv: '',
					code: '',
					appid: '',
					appsecret: ''
				},
				newsParams: {
					token: ''
				},
				token: ''
			}
		},
		computed: {
			tokenVal({
				token
			}) {
				return token || uni.getStorageSync('token')
			}
		},
		onLoad() {
			if(uni.getStorageSync('token') === null || uni.getStorageSync('token') == ""){
				uni.redirectTo({
					url:"/pages/login/index"
				})
			} else {
				this.token = uni.getStorageSync('token');
				this.initPage()
			}
		},
		methods: {
			honeCall() {
				uni.makePhoneCall({
					phoneNumber: '13416482642'
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			initPage() {
				this.getShuffling();
				this.getHeaderlist();
				this.getNews()
			},
			getNews() {
				this.newsParams.token = uni.getStorageSync("token");
				getNewsList(this.newsParams).then(res => {
					this.newsflash = res.newsList
				})
			},
			getImageUrl(src) {
				return this.domain + src;
			},

			//如果选中活动精选，跳转到服务列表
			//如果选中活动风采，跳转到新闻列表
			toList() {
				if (this.current == 0) {
					uni.navigateTo({
						url: "/pages/index/services/index"
					})
				} else {
					uni.navigateTo({
						url: "/pages/index/news/list"
					})
				}
			},

			//跳转到新闻明细
			toNewDetail(id) {
				console.log('新闻明细：', id)
				uni.navigateTo({
					url: "/pages/index/news/detail?id=" + id
				})
			},
			getShuffling() {
				let token = uni.getStorageSync('token');
				getHeaderList({
					'token': token,
					'typeName': 'shuffling'
				}).then(res => {
					console.log("轮播图：", res);
					this.banner = res.data;
				})
			},
			getHeaderlist() {
				let token = uni.getStorageSync('token');
				getHeaderList({
					'token': token,
					'typeName': 'headerlist'
				}).then(res => {
					console.log("中间三张图：", res);
					this.headerlist = res.data;
				})
			}
		},





		onReachBottom() {
			console.log("触底了");
		},
		onPullDownRefresh() {
			console.log("下拉刷新");
		}
	}
</script>

<style lang='scss' scope>
	page {
		height: 100%;
		width: 100vw;
		min-height: 100vh;
		background-color: $global_bg_color;
		padding-top: 1rpx;
		padding: 10rpx;
	}

	/* 搜索框 */
	.search {
		display: flex;
		border: 2rpx solid #b3b3b9;
		margin: 6rpx;
		width: 98vw;
		height: 60rpx;
		border-radius: 8rpx;

		.iconfont {
			margin-top: 6rpx;
			margin-left: 4rpx;
			// height: 100rpx;
			// width: 100rpx;
			// margin: 200rpx auto 50rpx auto;
		}

		.search-input {
			margin-left: 10rpx;
			width: 100%;
		}
	}

	/* 图片轮番 */
	.thumb_swiper {
		swiper {
			height: calc(1024rpx / 2.5);

			image {
				height: 100%;
			}
		}
	}

	.recommends_wrap {
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		padding-top: 20rpx;
		background-color: #FFFFFF;
		margin-top: 10rpx;

		.recommends_item {
			width: 33%;

			.recommends_image {
				border-radius: 50%;
				height: 100rpx;
				width: 100rpx;
			}
		}
	}

	.newsflash {
		display: flex;
		height: 70rpx;
		border-radius: 5rpx;
		background-color: #FFFFFF;
		margin-top: 10rpx;
		justify-content: space-between;

		.segmented {
			width: 50vw;
		}

		.newsflash_right {
			display: flex;
			padding: 15rpx;
			align-items: center;

			.newsflash_splitline {
				background-color: #e68a00;
				height: 35rpx;
				width: 3rpx;
			}

			;

			.newsflash_more {
				line-height: 25rpx;
				font-size: 25rpx;
				width: 90rpx;
				color: #e68a00;
				text-align: center;
			}
		}

		;

		.newsflash_middle {
			height: 100%;
			width: 530rpx;
			line-height: 50rpx;

			.newsflash_swiper {
				height: 100%;

				.newsflash_swiper_item {
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					justify-content: center;
				}
			}
		}

		;
	}

	.segmented_content {
		margin-top: 10rpx;
		height: 100%;

		.message {
			width: 100%;
			height: 100%;
		}
	}


	.map {
		width: 750rpx;
		height: 750rpx;
	}

	.recommend {
		margin: 10rpx 0;
		overflow: hidden;

		.recommend_top {
			display: flex;
			height: 55rpx;
			margin: 10rpx;

			.recommend_left {
				height: 100%;
				width: 20rpx;
				border-radius: 10rpx;
				background-color: #e68a00;
				margin-left: 30rpx;
			}

			;

			.recommend_content {
				height: 100%;
				margin-left: 10rpx;
				font-size: 35rpx;
				line-height: 55rpx;
			}
		}

		;

		.recommend_list {
			padding: 0 15rpx;
			display: flex; //一行显示
			flex-wrap: wrap;
			justify-content: space-between;

			.recommend_item {
				background-color: #f5f5f5;
				height: 300rpx;
				width: 355rpx;
				margin: 5rpx 0;

				.recommend_type {
					background-color: #007AFF;
					width: 80rpx;
					height: 50rpx;
					padding: 3rpx 10rpx;
					color: #FFFFFF;
					margin-left: -360rpx;
					margin-top: 10rpx;
					border-radius: 8rpx;
				}

				;

				image {
					height: 200rpx;
				}

				;

				.recommend_title {
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					justify-content: center;
					font-size: 30rpx;
					margin: 5rpx 0;
				}

				;

				.recommend_date {
					margin: 5rpx 0;
					color: #999999;
				}
			}
		}
	}
</style>
